<!--
  * 安全事件详情弹窗
  *
  * @Author:    chenyuqiang
  * @Date:      2025-01-27 10:00:00
  * @Copyright 1.0
-->
<template>
    <a-modal
        v-model:open="visible"
        title="安全事件详情"
        width="80%"
        :footer="null"
        :destroyOnClose="true"
        :maskClosable="false"
    >
        <div v-if="record" class="event-detail-container">
            <!-- 基础元数据 -->
            <a-card title="基础元数据" size="small" class="detail-card">
                <a-row :gutter="16">
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>事件ID：</label>
                            <span>{{ record.eventId }}</span>
                        </div>
                    </a-col>
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>ES ID：</label>
                            <span>{{ record.esId || '-' }}</span>
                        </div>
                    </a-col>
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>系统时间：</label>
                            <span>{{ formatTimestamp(record.timestamp) }}</span>
                        </div>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>事件时间：</label>
                            <span>{{ formatTime(record.eventTime) }}</span>
                        </div>
                    </a-col>
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>接收时间：</label>
                            <span>{{ record.reciveTime || '-' }}</span>
                        </div>
                    </a-col>
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>来源名称：</label>
                            <span>{{ record.name || '-' }}</span>
                        </div>
                    </a-col>
                </a-row>
            </a-card>

            <!-- 事件基本信息 -->
            <a-card title="事件基本信息" size="small" class="detail-card">
                <a-row :gutter="16">
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>事件类型：</label>
                            <a-tag color="blue">{{ record.eventType }}</a-tag>
                        </div>
                    </a-col>
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>事件名称：</label>
                            <span>{{ record.eventName || '-' }}</span>
                        </div>
                    </a-col>
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>事件规则：</label>
                            <span>{{ record.eventRule || '-' }}</span>
                        </div>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>危险等级：</label>
                            <a-tag :color="getSeverityColor(record.severity)">
                                {{ getSeverityText(record.severity) }}
                            </a-tag>
                        </div>
                    </a-col>
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>日志类型：</label>
                            <span>{{ record.logType || '-' }}</span>
                        </div>
                    </a-col>
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>详细信息：</label>
                            <span>{{ record.detailInfo || '-' }}</span>
                        </div>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>分组数量：</label>
                            <span>{{ record.groupCount || '-' }}</span>
                        </div>
                    </a-col>
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>分组键值：</label>
                            <span>{{ record.groupKeys || '-' }}</span>
                        </div>
                    </a-col>
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>记录名称：</label>
                            <span>{{ record.recname || '-' }}</span>
                        </div>
                    </a-col>
                </a-row>
            </a-card>

            <!-- 设备和资产信息 -->
            <a-card title="设备和资产信息" size="small" class="detail-card">
                <a-row :gutter="16">
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>设备名称：</label>
                            <span>{{ record.deviceName || '-' }}</span>
                        </div>
                    </a-col>
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>设备IP：</label>
                            <span>{{ record.deviceIp || '-' }}</span>
                        </div>
                    </a-col>
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>攻击数据包：</label>
                            <span>{{ record.attackPackets || '-' }}</span>
                        </div>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>源CMDB名称：</label>
                            <span>{{ record.srcCmdbName || '-' }}</span>
                        </div>
                    </a-col>
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>目标CMDB名称：</label>
                            <span>{{ record.dstCmdbName || '-' }}</span>
                        </div>
                    </a-col>
                </a-row>
            </a-card>

            <!-- 源端点信息 -->
            <a-card title="源端点信息" size="small" class="detail-card">
                <a-row :gutter="16">
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>源IP：</label>
                            <span>{{ record.srcIp || '-' }}</span>
                        </div>
                    </a-col>
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>源类型：</label>
                            <span>{{ record.srcType || '-' }}</span>
                        </div>
                    </a-col>
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>源端口：</label>
                            <span>{{ record.srcPort || '-' }}</span>
                        </div>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>源主机名：</label>
                            <span>{{ record.srcHostname || '-' }}</span>
                        </div>
                    </a-col>
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>源MAC：</label>
                            <span>{{ record.srcMac || '-' }}</span>
                        </div>
                    </a-col>
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>源负责人：</label>
                            <span>{{ record.srcLeader || '-' }}</span>
                        </div>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>源安全域：</label>
                            <span>{{ record.srcSecurityDomains || '-' }}</span>
                        </div>
                    </a-col>
                </a-row>
            </a-card>

            <!-- 目标端点信息 -->
            <a-card title="目标端点信息" size="small" class="detail-card">
                <a-row :gutter="16">
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>目标IP：</label>
                            <span>{{ record.dstIp || '-' }}</span>
                        </div>
                    </a-col>
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>目标类型：</label>
                            <span>{{ record.dstType || '-' }}</span>
                        </div>
                    </a-col>
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>目标端口：</label>
                            <span>{{ record.dstPort || '-' }}</span>
                        </div>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>目标主机名：</label>
                            <span>{{ record.dstHostname || '-' }}</span>
                        </div>
                    </a-col>
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>目标负责人：</label>
                            <span>{{ record.dstLeader || '-' }}</span>
                        </div>
                    </a-col>
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>目标安全域：</label>
                            <span>{{ record.dstSecurityDomains || '-' }}</span>
                        </div>
                    </a-col>
                </a-row>
            </a-card>

            <!-- 网络协议信息 -->
            <a-card title="网络协议信息" size="small" class="detail-card">
                <a-row :gutter="16">
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>协议：</label>
                            <span>{{ record.protocol || '-' }}</span>
                        </div>
                    </a-col>
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>请求方法：</label>
                            <span>{{ record.reqMethod || '-' }}</span>
                        </div>
                    </a-col>
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>请求URL：</label>
                            <span>{{ record.reqUrl || '-' }}</span>
                        </div>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>Referer：</label>
                            <span>{{ record.reqReferer || '-' }}</span>
                        </div>
                    </a-col>
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>状态码：</label>
                            <span>{{ record.reqStatus || '-' }}</span>
                        </div>
                    </a-col>
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>User-Agent：</label>
                            <span>{{ record.reqUserAgent || '-' }}</span>
                        </div>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>请求主机：</label>
                            <span>{{ record.reqHost || '-' }}</span>
                        </div>
                    </a-col>
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>请求头：</label>
                            <span>{{ record.reqHeader || '-' }}</span>
                        </div>
                    </a-col>
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>请求体：</label>
                            <span>{{ record.reqBody || '-' }}</span>
                        </div>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>X-Forwarded-For：</label>
                            <span>{{ record.reqxff || '-' }}</span>
                        </div>
                    </a-col>
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>Cookie：</label>
                            <span>{{ record.reqCookie || '-' }}</span>
                        </div>
                    </a-col>
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>查询参数：</label>
                            <span>{{ record.queryString || '-' }}</span>
                        </div>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>请求开始时间：</label>
                            <span>{{ formatTime(record.reqStartTime) || '-' }}</span>
                        </div>
                    </a-col>
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>请求结束时间：</label>
                            <span>{{ formatTime(record.reqEndTime) || '-' }}</span>
                        </div>
                    </a-col>
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>返回头：</label>
                            <span>{{ record.respHeader || '-' }}</span>
                        </div>
                    </a-col>
                </a-row>
            </a-card>

            <!-- 威胁信息 -->
            <a-card v-if="record.threatCategory || record.threatSignature" title="威胁信息" size="small" class="detail-card">
                <a-row :gutter="16">
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>威胁分类：</label>
                            <a-tag color="red">{{ record.threatCategory || '-' }}</a-tag>
                        </div>
                    </a-col>
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>威胁签名：</label>
                            <span>{{ record.threatSignature || '-' }}</span>
                        </div>
                    </a-col>
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>攻击类型：</label>
                            <span>{{ record.attackType || '-' }}</span>
                        </div>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>攻击结果：</label>
                            <a-tag :color="(record.attackResult && record.attackResult === '成功') ? 'red' : 'orange'">{{ record.attackResult || '-' }}</a-tag>
                        </div>
                    </a-col>
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>攻击阶段：</label>
                            <span>{{ record.superType || '-' }}</span>
                        </div>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="24">
                        <div class="detail-item">
                            <label>威胁指标：</label>
                            <div class="long-text code-block">{{ formatThreatIndicators(record.threatIndicators) }}</div>
                        </div>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="24">
                        <div class="detail-item">
                            <label>攻击载荷：</label>
                            <div class="long-text code-block">{{ record.payload || '-' }}</div>
                        </div>
                    </a-col>
                </a-row>
            </a-card>

            <!-- 规则告警信息 -->
            <a-card v-if="record.ruleAlertName || record.ruleCode" title="规则告警信息" size="small" class="detail-card">
                <a-row :gutter="16">
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>规则名称：</label>
                            <span>{{ record.ruleAlertName || '-' }}</span>
                        </div>
                    </a-col>
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>规则代码：</label>
                            <span>{{ record.ruleCode || '-' }}</span>
                        </div>
                    </a-col>
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>告警批次：</label>
                            <span>{{ record.ruleBatch || '-' }}</span>
                        </div>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>威胁等级：</label>
                            <a-tag :color="getSeverityColor(record.ruleAlertLevel)">{{ record.ruleAlertLevel || '-' }}</a-tag>
                        </div>
                    </a-col>
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>告警结果：</label>
                            <span>{{ record.ruleAlertResult || '-' }}</span>
                        </div>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="24">
                        <div class="detail-item">
                            <label>攻击链：</label>
                            <div class="long-text">{{ record.ruleAlertLinks || '-' }}</div>
                        </div>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="24">
                        <div class="detail-item">
                            <label>告警描述：</label>
                            <span>{{ record.ruleAlertReason || '-' }}</span>
                        </div>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="24">
                        <div class="detail-item">
                            <label>处置建议：</label>
                            <div class="long-text">{{ record.ruleAlertDisposal || '-' }}</div>
                        </div>
                    </a-col>
                </a-row>
            </a-card>

            <!-- 文件信息 -->
            <a-card v-if="record.fileName || record.fileType" title="文件信息" size="small" class="detail-card">
                <a-row :gutter="16">
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>文件名称：</label>
                            <span>{{ record.fileName || '-' }}</span>
                        </div>
                    </a-col>
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>文件类型：</label>
                            <span>{{ record.fileType || '-' }}</span>
                        </div>
                    </a-col>
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>文件大小：</label>
                            <span>{{ formatFileSize(record.fileSize) }}</span>
                        </div>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>文件操作：</label>
                            <span>{{ record.fileOperation || '-' }}</span>
                        </div>
                    </a-col>
                </a-row>
            </a-card>

            <!-- 进程信息 -->
            <a-card v-if="record.procname || record.cmdline" title="进程信息" size="small" class="detail-card">
                <a-row :gutter="16">
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>进程名称：</label>
                            <span>{{ record.procname || '-' }}</span>
                        </div>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="24">
                        <div class="detail-item">
                            <label>命令行：</label>
                            <div class="long-text code-block">{{ record.cmdline || '-' }}</div>
                        </div>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="24">
                        <div class="detail-item">
                            <label>父进程命令行：</label>
                            <div class="long-text code-block">{{ record.pCmdline || '-' }}</div>
                        </div>
                    </a-col>
                </a-row>
            </a-card>

            <!-- 系统信息 -->
            <a-card title="系统信息" size="small" class="detail-card">
                <a-row :gutter="16">
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>系统类型：</label>
                            <span>{{ record.osType || '-' }}</span>
                        </div>
                    </a-col>
                </a-row>
            </a-card>

            <!-- 运营信息 -->
            <a-card title="运营信息" size="small" class="detail-card">
                <a-row :gutter="16">
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>白名单规则：</label>
                            <span>{{ record.whiteRuleEffect || '-' }}</span>
                        </div>
                    </a-col>
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>设备操作系统：</label>
                            <span>{{ record.deviceos || '-' }}</span>
                        </div>
                    </a-col>
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>连接方式：</label>
                            <span>{{ record.cType || '-' }}</span>
                        </div>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>阻断状态：</label>
                            <span>{{ record.blocked || '-' }}</span>
                        </div>
                    </a-col>
                    <a-col :span="8">
                        <div class="detail-item">
                            <label>处置动作：</label>
                            <span>{{ record.action || '-' }}</span>
                        </div>
                    </a-col>
                </a-row>
            </a-card>

            <!-- 原始日志 -->
            <a-card title="原始日志" size="small" class="detail-card">
                <div class="raw-log-container">
                    <pre class="raw-log-content">{{ record.rawLog || '暂无原始日志数据' }}</pre>
                </div>
            </a-card>
        </div>

        <div v-else class="loading-container">
            <a-spin size="large" />
            <div class="loading-text">加载中...</div>
        </div>
    </a-modal>
</template>

<script setup>
import { ref } from 'vue';
import { message } from 'ant-design-vue';
import { eventBaseEsApi } from '/@/api/business/event-base/event-base-es-api';

// 弹窗显示状态
const visible = ref(false);
// 事件数据，直接使用表格行数据
const record = ref(null);

// 显示详情弹窗
const show = async (rowData, opnum = 1) => {
    console.log('Detail component show method called with:', rowData);
    console.log('Received opnum parameter:', opnum);
    console.log('Received opnum type:', typeof opnum);
    console.log('Received opnum value:', JSON.stringify(opnum));
    visible.value = true;
    
    try {
        // 调用获取详情接口 - 使用传递过来的opnum参数
        const response = await eventBaseEsApi.getEventById({
            eventId: rowData.eventId, // 直接传递字符串
            opnum: opnum // 使用传递过来的opnum参数
        });
        
        if (response.ok) {
            rowData.rawLog = response.data.rawLog;
            record.value = rowData;
        } else {
            message.error('获取详情失败：' + response.msg);
            record.value = rowData; // 如果接口失败，使用列表数据作为备选
        }
    } catch (error) {
        console.error('获取详情出错：', error);
        message.error('获取详情出错：' + error.message);
        record.value = rowData; // 发生错误时使用列表数据作为备选
    }
};

// 格式化时间
const formatTime = (timeStr) => {
    if (!timeStr) return '-';
    try {
        if (typeof timeStr === 'string' && timeStr.includes('T')) {
            return timeStr.replace('T', ' ').replace('.000Z', '');
        }
        return String(timeStr);
    } catch (e) {
        console.warn('Error formatting time:', e, 'timeStr:', timeStr);
        return String(timeStr);
    }
};

// 格式化时间戳
const formatTimestamp = (timestamp) => {
    if (!timestamp) return '-';
    try {
        const date = new Date(timestamp);
        return date.toLocaleString();
    } catch (e) {
        console.warn('Error formatting timestamp:', e, 'timestamp:', timestamp);
        return String(timestamp);
    }
};

// 获取危险等级颜色
const getSeverityColor = (severity) => {
    if (!severity) return 'default';
    const colorMap = {
        1: 'green',
        2: 'blue',
        3: 'orange',
        4: 'red',
        5: 'purple'
    };
    return colorMap[severity] || 'default';
};

// 获取危险等级文本
const getSeverityText = (severity) => {
    if (!severity) return '-';
    const textMap = {
        1: '低危',
        2: '中危',
        3: '高危',
        4: '严重',
        5: '紧急'
    };
    return textMap[severity] || String(severity);
};

// 获取地理位置信息
function getGeoInfo(city, lat, lon) {
    try {
        if (city || lat || lon) {
            let geo = [];
            if (city) geo.push(String(city));
            if (lat && lon) geo.push(`${String(lat)}, ${String(lon)}`);
            return geo.join(' ');
        }
        return '-';
    } catch (e) {
        console.warn('Error formatting geo info:', e, 'city:', city, 'lat:', lat, 'lon:', lon);
        return '-';
    }
}

// 格式化文件大小
function formatFileSize(bytes) {
    if (bytes === null || bytes === undefined || bytes === '') return '-';
    if (bytes === 0) return '0 Bytes';
    try {
        const numBytes = Number(bytes);
        if (isNaN(numBytes)) return String(bytes);
        if (numBytes === 0) return '0 Bytes';
        const k = 1024;
        const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
        const i = Math.floor(Math.log(numBytes) / Math.log(k));
        return parseFloat((numBytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    } catch (e) {
        console.warn('Error formatting file size:', e, 'bytes:', bytes);
        return String(bytes);
    }
}

// 格式化威胁指标
function formatThreatIndicators(indicators) {
    if (!indicators) return '-';
    
    // 如果是字符串，直接返回
    if (typeof indicators === 'string') {
        return indicators;
    }
    
    // 如果是数组
    if (Array.isArray(indicators)) {
        if (indicators.length === 0) return '-';
        
        return indicators.map(item => {
            // 如果item是字符串，直接返回
            if (typeof item === 'string') {
                return item;
            }
            // 如果item是对象且有name和value属性
            if (item && typeof item === 'object' && item.name && item.value) {
                return `${item.name}: ${item.value}`;
            }
            // 如果item是对象但没有预期的属性，转换为字符串
            if (item && typeof item === 'object') {
                return JSON.stringify(item);
            }
            // 其他情况，转换为字符串
            return String(item);
        }).join('\n');
    }
    
    // 如果是对象，转换为字符串
    if (typeof indicators === 'object') {
        return JSON.stringify(indicators);
    }
    
    // 其他情况，转换为字符串
    return String(indicators);
}

// 获取请求方法颜色
function getMethodColor(method) {
    if (!method) return 'default';
    if (method.toLowerCase() === 'get') return 'blue';
    if (method.toLowerCase() === 'post') return 'green';
    if (method.toLowerCase() === 'put') return 'orange';
    if (method.toLowerCase() === 'delete') return 'red';
    if (method.toLowerCase() === 'options') return 'purple';
    if (method.toLowerCase() === 'head') return 'cyan';
    if (method.toLowerCase() === 'patch') return 'magenta';
    return 'default';
}

// 暴露方法给父组件
defineExpose({
    show
});
</script>

<style lang="less" scoped>
.event-detail-container {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    padding: 0 16px;

    .detail-card {
        margin-bottom: 16px;

        .detail-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 8px;

            label {
                min-width: 100px;
                color: #666;
                margin-right: 8px;
            }

            span {
                flex: 1;
                word-break: break-all;
            }
        }
    }

    .raw-log-container {
        max-height: 300px;
        overflow-y: auto;
        background: #f5f5f5;
        padding: 16px;
        border-radius: 4px;

        .raw-log-content {
            margin: 0;
            white-space: pre-wrap;
            word-break: break-all;
            font-family: monospace;
        }
    }
}

.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;

    .loading-text {
        margin-top: 16px;
        color: #666;
    }
}
</style> 